/* eslint-disable react/no-danger */
/* eslint-disable camelcase */
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Row, Col, Card, DatePicker } from 'antd';
import { ChartCard, Bar, Pie } from '../DashboardAnalysis/components/Charts';

const { RangePicker } = DatePicker
@connect(({ loading, dashboard }) => ({
  dashboard,
  loading: loading.models.dashboard,
}))
export default class Summary extends PureComponent {
  state = {
    rangeDateArr: [],
  }

  componentDidMount () {
    const { dispatch } = this.props

    dispatch({
      type: 'dashboard/fetchPropView',
    })

    dispatch({
      type: 'dashboard/fetchPtypeView',
    })

    dispatch({
      type: 'dashboard/fetchRepairView',
    })
  }

  getChartData = ({ data, xKey, yKey = 'count' }) => data.map(item => ({
    x: item[xKey],
    y: +item[yKey] || 0,
  }))

  handleRangeChange = dates => {
    let [startDate, endDate] = dates
    if (startDate) startDate = startDate.format('YYYY-MM-DD')
    if (endDate) endDate = endDate.format('YYYY-MM-DD')

    this.setState({
      rangeDateArr: dates,
    })

    this.props.dispatch({
      type: 'dashboard/fetchPtypeView',
      payload: {
        startDate,
        endDate,
      },
    })
    this.props.dispatch({
      type: 'dashboard/fetchRepairView',
      payload: {
        startDate,
        endDate,
      },
    })
  }

  renderChartCard () {
    const { propViewData } = this.props.dashboard

    const data = [
      {
        title: '总资产',
        status: propViewData.num,
        rateStatus: ' ',
      },
      {
        title: '使用中',
        status: propViewData.status1,
        rateStatus: propViewData.rateStatus1,
      },
      {
        title: '闲置中',
        status: propViewData.status2 || 0,
        rateStatus: propViewData.rateStatus2,
      },
      {
        title: '维修中',
        status: propViewData.status3,
        rateStatus: propViewData.rateStatus3,
      },
      {
        title: '报废',
        status: propViewData.status4,
        rateStatus: propViewData.rateStatus4,
      },
    ]
    return data.map(item => (
      <ChartCard
        title={item.title}
        total={item.status || 0}
        footer={false}
        contentHeight={46}
        key={item.title}
        style={{ flex: '0 0 auto', width: '19%' }}
      >
        <span>{item.title === '总资产' ? ' ' : `占比 ${item.rateStatus || '0.00'}%`}</span>
      </ChartCard>
    ))
  }

  render () {
    const { ptypeViewData, repairViewData } = this.props.dashboard
    const { rangeDateArr } = this.state

    return (
      <div style={{ margin: '0 -24px', backgroundColor: '#fff' }}>
        <Row gutter={20} style={{ padding: 24 }}>
          <div style={{ display: 'flex', justifyContent: 'space-around' }}>
            {this.renderChartCard()}
          </div>
        </Row>
        <Row gutter={24} style={{ padding: 24 }}>
          <Col span={12}>
            <Card title="资产分类" extra={(<RangePicker value={rangeDateArr} style={{ width: '200px' }}
              onChange={dates => {
                this.handleRangeChange(dates)
              }}
            ></RangePicker>)}>
              <Bar height={445} title="数量" data={this.getChartData({ data: ptypeViewData, xKey: 'zcClassName' }) || []} />
            </Card>
          </Col>
          <Col span={12}>
            <Card title="故障维修统计" extra={(<RangePicker value={rangeDateArr} style={{ width: '200px' }}
              onChange={dates => {
                this.handleRangeChange(dates)
              }}
            ></RangePicker>)}>
              <Pie
                hasLegend
                title="业务量"
                subTitle="报修量"
                data={this.getChartData({ data: repairViewData, xKey: 'repairTypeName' }) || []}
                height={445}
                total={() => (
                  <span
                    dangerouslySetInnerHTML={{
                      __html: repairViewData &&
                        repairViewData.reduce((pre, now) => +now.count + pre, 0),
                    }}
                  />
                )}
                valueFormat={val => <span dangerouslySetInnerHTML={{ __html: val }} />}
              />
            </Card>
          </Col>
        </Row>
      </div>
    )
  }
}
